import { FC } from 'react'
import { QuestionCheckboxProps } from './types'
import { Checkbox, Space, Typography } from 'antd'

export const QuestionCheckboxDefaultProps: QuestionCheckboxProps = {
  title: '多选标题',
  isVertical: false,
  list: [
    { value: 'item1', text: '选项 1', checked: false },
    { value: 'item2', text: '选项 2', checked: false },
    { value: 'item3', text: '选项 3', checked: false },
  ],
}

const QuestionCheckbox: FC<QuestionCheckboxProps> = props => {
  const { title, isVertical, list = [] } = { ...QuestionCheckboxDefaultProps, ...props }

  return (
    <div>
      <Typography.Paragraph strong>{title}</Typography.Paragraph>
      <Space direction={isVertical ? 'vertical' : 'horizontal'} wrap>
        {list.map(opt => {
          return (
            <Checkbox value={opt.value} key={opt.value} checked={opt.checked}>
              {opt.text}
            </Checkbox>
          )
        })}
      </Space>
    </div>
  )
}

export default QuestionCheckbox
